/* eslint-disable no-mixed-spaces-and-tabs */
import Vue from 'vue'
import './public-path'
import Cookies from 'js-cookie'
import './assets/styles/common.scss'
import './assets/styles/dark.scss'
import './assets/styles/dark-model.scss'
import Element from 'element-ui'
import './assets/styles/element-variables.scss'

import '@/assets/styles/index.scss' // global css
import '@/assets/styles/hongke.scss' // hongke css
import App from './App'
import store from './store'
import directive from './directive' // directive
import plugins from './plugins' // plugins
import { download, gDownload } from '@/utils/request'
import { tools } from './utils/tool'
import './assets/icons' // icon
// import './permission' // permission control
import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from '@/utils/hongke'
// 分页组件
import Pagination from '@/components/Pagination'
// 文件上传组件
import FileUpload from '@/components/FileUpload'
// 图片上传组件
import ImageUpload from '@/components/ImageUpload'
// 图片预览组件
import ImagePreview from '@/components/ImagePreview'
// 头部标签组件
import VueMeta from 'vue-meta'
// 引入echart
import echarts from 'echarts'
import VueTribute from 'vue-tribute'
//  引入formMaking
import FormMaking from 'form-making'
import 'form-making/dist/FormMaking.css'
// 全局引入moment
import moment from 'moment'
import routers from './router'
// import fileUpload from '@/components/FormDesign/fileUpload.vue'
moment.locale('zh-cn')
Vue.prototype.moment = moment

// 全局方法挂载
Vue.prototype.parseTime = parseTime
Vue.prototype.resetForm = resetForm
Vue.prototype.addDateRange = addDateRange
Vue.prototype.selectDictLabel = selectDictLabel
Vue.prototype.selectDictLabels = selectDictLabels
Vue.prototype.download = download
Vue.prototype.gDownload = gDownload
Vue.prototype.handleTree = handleTree
Vue.prototype.$echarts = echarts
Vue.prototype.$bus = new Vue()
Vue.prototype.$tools = tools
// 全局组件挂载
Vue.component('Pagination', Pagination)
Vue.component('FileUpload', FileUpload)
Vue.component('ImageUpload', ImageUpload)
Vue.component('ImagePreview', ImagePreview)
Vue.component('VueTribute', VueTribute)
Vue.use(directive)
Vue.use(plugins)
Vue.use(VueMeta)
/* Vue.use(FormMaking, {
  components: [{
    name: 'FileUpload',
    component: fileUpload // 自定义组件
  }]
}) */
Vue.use(FormMaking)
const VUE_APP_VERSION = require('../package.json').version
const vers = window.localStorage.getItem('Version')
if (VUE_APP_VERSION != vers) {
  localStorage.clear()
  window.localStorage.setItem('Version', VUE_APP_VERSION)
  location.reload()
}
/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online! ! !
 */

Vue.use(Element, {
  size: Cookies.get('size') || 'medium' // set element-ui default size
})

Vue.config.productionTip = false

let router = null
let instance = null
function render(props = {}) {
  const { container } = props
  router = routers
  instance = new Vue({
    router,
    store,
    render: (h) => h(App)
  }).$mount(container ? container.querySelector('#app') : '#app')
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render()
}
// 主应用和子应用通信方案
// 主应用创建共享状态：
const storeChange = async (props) => {
  // 微应用通过 props 获取共享状态并监听
  props.onGlobalStateChange &&
    // props.onGlobalStateChange()方法就是用来监听主应用传值，value就是我们在主应用中action.js中初始化的对象值，每当主应用中调用setGlobalState()方法改变值的时候，在这里都可以监听到最新的值
    (await props.onGlobalStateChange(async (value) => {
      store.dispatch('SetPermissions', value.permission)
      render(props)
    }, true))
}

export async function bootstrap(props) {
  console.log('[vue] vue app bootstraped-----------', props)
}
export async function mount(props) {
  console.log('[vue] props from main framework', props)
  await storeChange(props)
  // render(props)
}
export async function unmount() {
  instance.$destroy()
  instance.$el.innerHTML = ''
  instance = null
  router = null
}
